﻿@charset "utf-8";
/* CSS Document */
body{font: normal 100% "Source Han Sans CN", "noto sans"; width:auto; height:100%; background:#f0eff4; font-size: 28px;}
body {margin: 0; padding: 0;}
img, div, ul, li, dl, dt, dd, form, section,p,span,i {border: 0 none;list-style: none;font-style:normal;margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6,p,input{ margin: 0; padding: 0; font-weight:normal;}
a{text-decoration:none; color:#000;}
input {font-family:"Source Han Sans CN", "noto sans";-webkit-appearance:none; }
input[type="submit"],input[type="reset"],input[type="button"],input{-webkit-appearance:none;}

.container{ margin: 0 auto; width: 1920px; height: 1080px;}
.side{ width: 640px; height: 1080px; float: right; position: relative;color: #fff; background: -webkit-linear-gradient(#4d5aa9,#7983c0);   background: -o-linear-gradient(#4d5aa9,#7983c0);
  background: -moz-linear-gradient(#4d5aa9,#7983c0);  background: linear-gradient(#4d5aa9,#7983c0); }
.sidebg{ width: 100%; margin-bottom: 36px;}
.sidebg p{ text-align:center; padding: 36px 0 36px;}
.sidebg .server{background: url(../../../images/server.png) center 0 no-repeat; height: 378px; position: relative;}
.sidebg img{ width: 24px; height: 3px; position:absolute; top: 250px; left: 307px; animation:mouthmove 1s infinite;
-moz-animation:mouthmove 1s infinite; -webkit-animation:mouthmove 1s infinite;-o-animation:mouthmove 1s infinite;
}

@keyframes mouthmove
{
0%   {height: 3px;}
25%  {height: 23px;}
50%  {height: 23px;}
100% {height: 3px;}
}

@-moz-keyframes mouthmove /* Firefox */
{
0%   {height: 3px;}
25%  {height: 23px;}
50%  {height: 23px;}
100% {height: 3px;}
}

@-webkit-keyframes mouthmove /* Safari and Chrome */
{
0%   {height: 5px;}
25%  {height: 23px;}
50%  {height: 23px;}
100% {height: 3px;}
}

@-o-keyframes mouthmove /* Opera */
{
0%   {height: 5px;}
25%  {height: 23px;}
50%  {height: 23px;}
100% {height: 3px;}
}
.sidecon{ overflow: hidden;}
.sidetit{ border-top: 1px solid #7d87c0; padding:36px 32px; margin-bottom: 10px;}
.shortcut{  padding: 0 32px; overflow: hidden;}
.shortcut li{ width: 172px;height: 172px; float: left;  border-radius: 5px; margin-bottom: 30px; margin-right: 30px; text-align: center; background-color:#f7ae3a; }
.shortcut li:nth-child(3n){ margin-right: 0;}
.shortcut .enabled{background-color:#bababa; position: relative; overflow: hidden;}
.shortcut .enabled:after{ content: "暂停"; position: absolute; width: 100px; padding: 16px 0 6px; background: #f26463; transform: rotate(45deg); top: -8px; right: -36px; font-size: 0.5em;}
.shortcut li .quickicon{ width: 100%; height: 100px;background-image: url(../../../images/shortsprite.png); background-repeat: no-repeat;background-position: center 28px;}
.shortcut li:nth-child(2) .quickicon{ background-position: center -56px;}
.shortcut li:nth-child(3) .quickicon{ background-position: center -136px;}
.shortcut li:nth-child(4) .quickicon{ background-position: center -216px;}
.shortcut li:nth-child(5) .quickicon{ background-position: center -296px;}
.shortcut li:nth-child(6) .quickicon{ background-position: center -376px;}
.mainwrap{  width: 1280px; height: 1080px; position: relative; float: left;}
.msglist{ height: 720px; overflow-y: auto; position: relative;padding:30px; }
.msgwrap{ margin-bottom: 30px; overflow: hidden; position: relative; float: left; width: 80%;}
.msgwrap:last-child{ margin: 0;}

.msgwrap .headicon {
    position: absolute;
    top: 0;
    border-radius: 50%;
    height: 72px;
    line-height: 72px;
    width: 72px;
    text-align: center;
    overflow: hidden;
}
.dialog{ position: relative; margin-left: 96px;}
.dialog span{background:#fff; padding:10px 20px;border-radius:8px; border:1px solid #e5e5e5; display:inline-block; line-height: 2;}
.dialog strong{ color: #f26463; font-weight: normal;}
.dialog :before{position: absolute; display: inline-block; border-top: 7px solid transparent; border-right: 12px solid #fff; border-bottom: 7px solid transparent; border-right-color: rgba(255, 255, 255, 1.0); left: -10px; top: 28px; content: '';}
.customer{ float: right;}

.customer .headicon {
    right: 0;
}
.customer .dialog{ margin-right: 96px; color: #fff;}
.customer span{background: #36a9df; float:right;}
.customer :before{transform: rotate(180deg); left: auto; right:-10px; border-right: 12px solid #36a9df;}


.msgtime span{ background:#dfdfdf; padding:5px; border-radius:5px;}
.dialog .msgname{ background:none; border:none; padding:0; color:#8b8b8b;}
.dialog .msgname:before{ border:none;}
.dialog a{ color:#36a9df;}

.btmwrap{ position:absolute; bottom:0; right:0; width: 100%; height:300px; background: #fff; text-align:center;}
.btmtime{ background: url(../../../images/wave.png) center center no-repeat; position: absolute; width: 100%; top: 20px; display: none;}
.btmimg{padding-top: 60px;}
.btmtips{ position: relative; margin-bottom:10px;}
.btmimg img{ background: #36a9df; padding: 24px; border-radius: 50%;}
.on img{ background: #2e91c0;}

.ringoff { vertical-align: middle; padding-right: 5px;}
.tel{ position: absolute; left: 30px; bottom: 90px; background: url(../../../images/tel.png) center center no-repeat #00cc33; background-size: 32px 32px; width: 72px; height: 72px; border-radius: 50%; overflow: hidden;}

/*-----------------------hidden----------------------------*/
.hidebg {	display:none;	background: rgba(0,0,0,0.9);	width: 100%;	height: 100%;	left:0;	top:0;z-index:1;	position:fixed!important;	position:absolute;}
.hidepart {	width:600px; height: 100%; overflow:auto;	position:absolute;	top:0;	left:50%; margin-left: -300px; z-index:2;	/*display:none; color: #fff; */text-align: center;}
.hidehead { border: 6px solid rgba(0,0,0,0.1); padding: 10px;width: 192px; height: 192px; margin: 120px auto 0; border-radius: 50%; margin-bottom: 20px;}
.hidehead span{background: url(../../../images/server.png) center center no-repeat #3399cc; background-size: 96px auto;border-radius: 50%; width: 100%; height: 100%; display:inline-block;}
.hidestate{ padding: 20px 0; margin-bottom: 160px;}
.hangup{background: url(../../../images/tel.png) center center no-repeat #ff6666;transform: rotate(135deg);width: 144px; height: 144px;  position: absolute; bottom: 120px;  left: 50%; margin-left: -72px; border-radius: 50%; }
